import { setItem, getItem } from '@/utils/storage'
import { STATE } from '@/utils/constants'

export default {
  state: () =>
    getItem(STATE) || {
      // 缓存组件页面
      catch_components: [],
      // 当前选中的菜单 - 默认选择首页
      activePath: '/',
      // 菜单项 - 默认需要展示的页面()
      tabList: getItem('store') || [
        {
          path: '/',
          label: '首页',
          name: '/',
          fullPath: '/'
        }
      ]
    },
  mutations: {
    // 路由导航start
    //清空vuex数据
    clearVUEX(state) {
      state.catch_components = []
      state.activePath = '/'
      state.tabList = [
        {
          path: '/',
          label: '首页',
          name: '/',
          fullPath: '/'
        }
      ]
      setItem(STATE, state)
    },
    // 跳转页面执行
    selectMenu(state, submenu) {
      // 首页就是 wellcome   也就是 home
      if (submenu.name === 'index') {
        submenu.name = 'index'
        label.path = '/'
        submenu.path = '/'
        submenu.fullPath = '/'
      }
      // 当前选中菜单
      var activePath = submenu.name
      // 历史已选中菜单列表
      var oldTabList = state.tabList

      // 将菜单信息添加到tablist - 添加时判断是否已有该路由标签
      var result = oldTabList.some((item) => {
        if (item.name === activePath) {
          // console.log('--------', item.fullPath != submenu.fullPath)
          // 有该路由标签是否为多次点击(相当于查看同路由下的详情，该过程只改变了参数)
          if (!item.fullPath != submenu.fullPath) {
            item.fullPath = submenu.fullPath
          }
          return true
        }
      })
      // 如果不包含该对象，则添加
      if (!result) {
        oldTabList.push({
          path: submenu.name,
          name: submenu.name,
          label: submenu.label,
          fullPath: submenu.fullPath
        })
      }
      // 重新赋值标签路由和当前选中菜单
      state.activePath = activePath
      state.tabList = oldTabList
      setItem(STATE, state)
    },
    // 添加keepalive缓存
    addKeepAliveCache(state, val) {
      // 如果是首页不缓存
      if (val === 'index') {
        return
      }
      // console.log(state.catch_components)

      // 添加时判断，如果该组件已存在，便不添加
      if (state.catch_components.indexOf(val) === -1) {
        // 不存在，缓存页面
        state.catch_components.push(val)
        setItem(STATE, state)
      }
    },
    // 删除keepalive缓存
    removeKeepAliveCache(state, val) {
      let cache = state.catch_components
      for (let i = 0; i < cache.length; i++) {
        if (cache[i] === val) {
          cache.splice(i, 1)
        }
      }
      state.catch_components = cache
      setItem(STATE, state)
    },
    //关闭菜单
    closeTab(state, val) {
      // 重新赋值
      state.activePath = val.activePath
      state.tabList = val.tabList
      setItem(STATE, state)
    },
    // 点击标签选择菜单
    changeMenu(state, val) {
      state.activePath = val
      setItem(STATE, state)
    }
  },
  actions: {}
}
